<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<%@ include file="../common/common.jsp"%>
		<script type="text/javascript" src="${ctx}/lib/My97DatePicker/WdatePicker.js"></script>
		<script type="text/javascript" src="${ctx}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
		<title>话题列表</title>
	</head>

	<body>
		<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页<span class="c-gray en">&gt;</span> 话题管理 <span class="c-gray en">&gt;</span> 话题列表
			<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<div class="page-container">
			<div class="text-c">
			          板块：
				<span class="select-box inline mr-20">
					<select id="section_id" name="section_id" class="select" style="width: 100px">
						<option value="">全部</option>
						<c:forEach items="${sections}" var="section">
							<option value="${section.id}">${section.name}</option>
						</c:forEach>
            		</select>
				</span>
				推荐状态：
				<span class="select-box inline mr-20">
					<select id="recommend" name="recommend" class="select" style="width: 100px">
						<option value="">全部</option>
						<option value="0">未推荐</option>
						<option value="1">已推荐</option>
            		</select>
				</span>
				用户：
				<input type="text" id="member_name" placeholder=" 用户名" style="width:200px" class="input-text mr-10"> 
				标题：
				<input type="text" id="topic_title" placeholder=" 标题关键字" style="width:200px" class="input-text mr-10"> 
				<p></p>
<!-- 				内容：
				<input type="text" id="topic_content" placeholder=" 内容关键字" style="width:200px" class="input-text mr-10"> -->
				发布日期：
				<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:160px;">
					-
				<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d'})" id="logmax" class="input-text Wdate" style="width:160px;">
				<button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
			</div>
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l">
			<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
				<i class="Hui-iconfont">&#xe6e2;</i> 批量删除
			</a>
		</span>
			</div>
			<div class="mt-20">
				<table id="table" class="table table-border table-bordered table-bg table-hover table-sort">
					<thead>
						<tr class="text-c">
							<th width="25"><input type="checkbox" name="checkAll" value=""></th>
							<th>序号</th>
							<th>板块ID</th>
							<th>板块</th>
							<th>标题</th>
							<th>用户ID</th>
							<th>用户</th>
							<th>点赞数</th>
							<th>浏览数</th>
							<th>回复数</th>
							<th>收藏数</th>
							<th>发布时间</th>
							<th>修改时间</th>
							<th>推荐状态</th>
							<th>操作</th>
						</tr>
					</thead>
				<tbody>
					<tr class="text-c">
						<td colspan="9">数据获取中....</td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
	<script type="text/javascript">
			$('#table').dataTable({
				"dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer"ip>',
				"aaSorting": [[ 11, "asc" ]],//默认第几个排序
				"bStateSave": false,//状态保存
				"aoColumnDefs": [
				     			{"bVisible": false, "aTargets": [ 2,5 ]},//控制列的隐藏显示
				     			{"orderable":false,"aTargets":[0,1,2,3,4,5,6,14]}// 不参与排序的列
				     		],
				"columnDefs":[
				    		  	{
				    		  		//设置列不参与搜索
				    		  		"targets":[0,1,7,8,9,10,12,14],
				    		  		"serchable":false
				    		  	}
				    		  ],
				"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
				"bServerSide": true,
				"sAjaxSource": ctx + "/topicManage/findTopicPage.do",//ajax地址 
	          	//配置列要显示的数据
	            "aoColumns": [
					{"sDefaultContent": ''},
					{"sDefaultContent": ''},
	            	{ "mData": "sectionId"},
	            	{ "mData": "sectionName"},
	            	{ "mData": "title" },
	            	{ "mData": "memberId" },
	            	{ "mData": "memberName" },
	            	{ "mData": "upCounts" },
	            	{ "mData": "viewCounts" },
	            	{ "mData": "replyCounts" },
	            	{ "mData": "collectCounts" },
	            	{ "mData": "createTime" },
	            	{ "mData": "modifyTime" },
	            	{ "mData": "recommend" },
	            	{"sDefaultContent": ''} // sDefaultContent 如果这一列不需要填充数据用这个属性，值可以不写，起占位作用
	            ],
				"fnServerData": retrieveData,//执行方法
				"fnRowCallback": fnRowCallback
			});
			//给搜索按钮绑定点击事件
			$(document).on("click","#search",
					function() {
						//自己定义的搜索框，可以是时间控件，或者checkbox 等等
						var data = {};
						var sectionId = $("#section_id").val();
						if(sectionId.length != 0){
							data.sectionId = sectionId;
						}
						var recommend = $("#recommend").val();
						if(recommend.length != 0){
							data.recommend = recommend;
						}
						var memberName = $("#member_name").val();
						if(memberName.length != 0){
							data.memberName = memberName;
						}
						var title = $("#topic_title").val();
						if(title.length != 0){
							data.title = title;
						}
/* 						var content = $("#topic_content").val();
						if(content.length != 0){
							data.content = content;
						} */
						var startTime = $("#logmin").val();
						var endTime = $("#logmax").val();
						if(startTime.length == 0 && endTime.length == 0){
							
						}else{
							var _startTime = getUnixTime(startTime)+"";
							var _endTime = getUnixTime(endTime)+"";
							if(_startTime.length == 0){
								_startTime = "0";
							}
							if(_endTime.length == 0){
								_endTime = "0";
							}
							data.createTime = _startTime + "," + _endTime;
						}
						$('#table').DataTable().search(JSON.stringify(data)).draw();
					});
			
		function retrieveData(sSource, aoData, fnCallback) {
			var index = layer.load(0, {shade: false});
		    $.ajax({
		        type: "POST",
		        contentType: "application/x-www-form-urlencoded",
		        url: sSource,
		        dataType: "json",
		        data: aoData, 
		        success: function (resp) {
		        	layer.close(index);
		        	if(resp.code != "ok"){
						console.log("返回失败", resp);
						layer.msg(resp.msg,{icon: 5,time:2000});
		        	}else{
		        		var bizData = resp.object;
				        var data={
								"sEcho":bizData.userdata.sEcho, //当前显示的第一条数据
								"iTotalRecords":bizData.records,  //总记录数
								"iTotalDisplayRecords":bizData.records,  //当前显示的总记录数
								"aaData":bizData.rows //数据列表
				        };
				        fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式  	
		        	}
		        },
				error: function(data) {
					console.log("返回失败", data);
					layer.close(index);
					layer.msg(data.msg,{icon: 5,time:2000});
					$("table tbody").html('<tr class="text-c"><td colspan="11">'+data.msg+'...</td></tr>');
				}
		    });
		}
		
		// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的
		function fnRowCallback(nRow, aData, iDisplayIndex) {
			$(nRow).addClass('text-c');
			$('td:eq(0)', nRow).html("<input type='checkbox' value='"+aData.id+"' name='del'>");
			$('td:eq(1)', nRow).html(iDisplayIndex+1);
			$('td:eq(9)', nRow).html(dates(aData.createTime));
			if (aData.modifyTime == '660672000000') {
				$('td:eq(10)', nRow).html('未修改');
			}else{
				$('td:eq(10)', nRow).html(dates(aData.modifyTime));
			}
			var recommendHtml = '';
			if(aData.recommend == 0){
				$('td:eq(11)', nRow).html("<span class='label label-default radius'>未推荐</span>");
				recommendHtml = "<a style='text-decoration:none' class='ml-5'  onClick=recomend(0,'"+aData.id+"')  href='javascript:;' title='推荐'>推荐</a>";
			}else if(aData.recommend == 1){
				$('td:eq(11)', nRow).html("<span class='label label-success radius'>已推荐</span>");
				recommendHtml = "<a style='text-decoration:none' class='ml-5'  onClick=recomend(1,'"+aData.id+"')  href='javascript:;' title='取消推荐'>取消推荐</a>";
			}
			var deleteHtml = "<a style='text-decoration:none' class='ml-5' onClick=sectionDel(this,'"+aData.id+"')  href='javascript:;' title='删除'>删除</a>"
			var editeHtml = "<a style='text-decoration:none' class='ml-5'  onClick=showContent('详情','"+aData.id+"')  href='javascript:;' title='详情'>详情</a>";
			var commentHtml = "<a style='text-decoration:none' class='ml-5'  onClick=showReplyList('回复列表','"+aData.id+"')  href='javascript:;' title='回复列表'>回复列表</a>";
			
			$('td:eq(12)', nRow).html(deleteHtml+recommendHtml+editeHtml+commentHtml);
			return nRow;
		}
	</script>
	<script type="text/javascript">
	/* 查看 */
	function showContent(title, id){
		var url = ctx + "/topicManage/topicDetail?topicId=" + id;
		layer_show(title,url);
	}
	/* 评论列表*/
	function showReplyList(title,topicId){
		var url = ctx + "/replyManagePage/replyList?topicId=" + topicId;
		layer_show(title,url);
	}
	/*删除*/
	function sectionDel(obj,id){
		layer.confirm('确认要删除吗？',function(index){
			$.ajax({
				type : 'POST',
				url : ctx + '/topicManage/deleteTopics.do',
				data : {
					ids : id
				},
				dataType : 'json',
				timeout : 30000,
				context : $('body'),
				success : function(data) {
					if (data.code == "ok") {
						$(obj).parents("tr").remove();
						layer.msg('已删除!',{icon: 6,time:2000});
					} else {
						 layer.msg(data.msg, {icon: 5, time: 2000});
					}
				},
				error : function(xhr, type) {
					layer.msg('删除失败!', {icon: 5, time: 2000});
				}
			});
		});
	}
	/**
	 * 批量删除方法
	 */
	function datadel(){
		var ids = '';
		var obj = document.getElementsByName('del');
		var c_obj = new Array();
		for(var j=0;j<obj.length;j++){
			if (obj[j].checked) {
				//obj[j].checked = false;
				c_obj.push(obj[j]);
				if(ids==''){
					ids = obj[j].value;
				}else{
					ids += ','+obj[j].value;
				}
			}
		}
		if(ids.length <= 0){
			layer.msg('请选择要删除项',{icon:5,time:2000});
			return false;
		}
		layer.confirm('确认要删除吗？',function(index){
			if(ids.length>0){
				$.ajax({
					type : 'POST',
					url : ctx + '/topicManage/deleteTopics.do',
					data : {
						ids : ids
					},
					dataType : 'json',
					timeout : 30000,
					context : $('body'),
					success : function(data) {
						if (data.code == "ok") {
							for(var i=0;i<c_obj.length;i++){
								$(c_obj[i]).parents("tr").remove();
							}
							layer.msg('已删除'+c_obj.length+'条数据!',{icon:6,time:2000});
						} else {
							 layer.msg(data.msg, {icon: 5, time: 2000});
						}
					},
					error : function(xhr, type) {
						layer.msg('删除失败!', {icon: 5, time: 2000});
					}
				});
			}else{
				layer.msg('请选择要删除项',{icon:5,time:2000});
			}
		});
	}
	
	/*推荐、取消推荐*/
	function recomend(d, id){
		var tip = "";
		if(d == 0){
			d = 1;
			tip = "确定要推荐吗?";
		}else if(d == 1){
			d = 0;
			tip = "确定要取消推荐吗?";
		}
		layer.confirm(tip,function(index){
			var index = layer.load(0, {shade: false});
			$.ajax({
				type : 'POST',
				url : ctx + '/topicManage/updateTopic.do',
				data : {
					topicId : id,
					recommend : d
				},
				dataType : 'json',
				timeout : 30000,
				context : $('body'),
				success : function(data) {
					layer.close(index);
					if (data.code == "ok") {
						window.location.reload();
					} else {
						 layer.msg(data.msg, {icon: 5, time: 2000});
					}
				},
				error : function(xhr, type) {
					layer.close(index);
					layer.msg('操作失败!', {icon: 5, time: 2000});
				}
			});
		});
	}
	</script>
</body>

</html>